<%@ page language="java" pageEncoding="utf-8" %>

<!DOCTYPE html>
<html>
<head>
    <%@include file="../common/base.jsp"%>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>${appName}</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/login.css?version=${version}">
    <style>
        .login-form .sixtycount {
            color: #d0d5d9 !important;
        }
        .login-form .btn-ok {
            margin-bottom: 0;
        }
        .login-form .completeCount {
            color: #f99359 !important;
        }

        .validate:active, .validate:visited {
            color: #d0d5d9;
            text-decoration: none;
        }
        input {
            outline: none;
        }
    </style>
</head>
<body style="background-color: #fff;">
<div class="container-fluid">
    <form class="login-form">
        <ul>
            <li class="form-li">
                <img class="img" src="${base}/images/login_phone.png">
                <input id="mobileText" type="tel" maxlength="11" class="form-controller" placeholder="请输入手机号">
                <a id="btn-validate" class="validate completeCount" href="#">验证</a>
            </li>
            <li class="form-li">
                <img class="img" src="${base}/images/login_vertify.png">
                <input id="identifyCodeText" maxlength="4"  class="form-controller" placeholder="请输入验证码">
            </li>
        </ul>
        <a class="btn-ok" href="#">确定</a>
    </form>
</div>
</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js?version=${version}"></script>
<%--<script type="text/javascript" src="${base}/plugin/crypto-js/crypto-js.min.js"></script>--%>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<%--<script type="text/javascript" src="${base}/plugin/jsencrypt/jsencrypt.min.js"></script>--%>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var yun=new yueajax( "${openId}");
        var $document = $(document);
        $document.on('click', '.btn-ok', function () {
            // 登录动作
            var mobile = $("#mobileText").val();
            var identifyCode = $("#identifyCodeText").val();
            var openId = "${openId}" || getLocalStorage('openId');
            var sex = "${sex}";
            var nickName = "${nickName}";
            if (!checkPhone(mobile)) {
                layer.msg('请输入正确的手机号')
//                $("#mobileText").focus().val('');
                return;
            }
            if(mobile=="" && identifyCode==""){
                layer.msg('请输入手机号或验证码')
                return
            }else if(window.mobileSend!=mobile){
//                layer.msg('请确保发送验证码的手机和当前手机号一致')
//                return
            }
            if(getLocalStorage("isH5")){//H5登入
                yun.ajax_md5(
                        {
                            mobile:mobile,
                            identifyCode:identifyCode
                        },
                        '${base}/api/v1/passenger/login/login',
                        function(data){
                            var d=data.data;

                            var w$=window.top.$;
                            setLocalStorage('ifBindWxUser', true);
                            setLocalStorage("yueuserH5",data.data);
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            w$(".user-face").find('img').attr("src",  (d.face || "${base}/images/man.png"));
                            w$(".user-name").html( (d.nickname || "未填写"));
                            w$(".user-mobile").html( ((d.mobile).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')));
                           // window.top.location.reload();
                            parent.layer.close(index);
                        },
                        function(data){
                            if(data.errCode==10012){
                                noConferred(data);
                                return ;
                            }
                            $("#identifyCodeText").val('');
                            $("#identifyCodeText").focus();
                            $("#identifyCodeText").attr('placeholder','验证码错误');
                        }
                )
                return;
            }

            var k={mobile: mobile, nickName: nickName, sex: sex, identifyCode: identifyCode, openId: openId};
            yun.ajax_md5(
                    k,
                    '${base}/wx/passenger/login',
                    function (data) {
                        //TODO 登录后应该将乘客信息存储下来
                        //提示登陆成功并且已和该手机号绑定
//                        alert("登录成功");
                        // 关闭窗口
                        setLocalStorage('ifBindWxUser', true);
                        setLocalStorage("yueuserH5",data.data);
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        window.top.location.reload();
                        parent.layer.close(index);
                    },
                    function (data) {
                        if(data.errCode==10012){
                            noConferred(data);
                            return ;
                        }
                        $("#identifyCodeText").val('');
                        $("#identifyCodeText").focus();
                        $("#identifyCodeText").attr('placeholder','验证码错误');
                    }
            );
            return;
        });

        //发送验证码动作
        $document.on('click', '.completeCount', function () {
            var mobile = $("#mobileText").val();
            if (!checkPhone(mobile)) {
                layer.msg('请输入正确的手机号')
//                $("#mobileText").focus().val('');
                return;
            }
            var $this = $(this);
            if($this.hasClass('z-diz')){
                return;
            }
            $this.addClass('z-diz')
            var t = 60;
            var a = setInterval(daojishi, 1000);//1000毫秒
            function daojishi() {
                t--;
                //刷新时间显示
                if (t == 0) {
                    //倒计时结束
                    clearInterval(a);
                    $this.text('验证').removeClass('sixtycount').addClass('completeCount');
                    $this.removeClass('z-diz')
                } else {
                    $this.addClass('sixtycount').removeClass('completeCount');
                    $this.text(t + "秒");
                }
            }
            var p={mobile: mobile};
            yun.ajax_md5(
                    p,
                    "${base}/wx/passenger/login/sendIdentifyCode",

                    function (data) {
                        layer.msg('发送成功');
                        window.mobileSend=mobile

                    },
                    function (data) {
                       layer.msg(data.msg);
                    }
            );
        });

    });
</script>
</html>